我想對於 position 大家應該都不陌生：

• 預設是 static
• 要在子層用 absolute 的時候會對父層設定 relative
• 讓導覽列黏在上方的時候用 sticky
• 把回到頁面頂端的 icon 固定在畫面右下的時候會用 fixed

但正因熟悉，所以可能會以為自己了解了但實則不然，想藉著這次機會再重新閱讀文件來了解這個屬性。

Values

static：

對這個預設的定位屬性來說，top, right, bottom, left 與 z-index 都是沒有效果的。

relative：

照著 HTML 上元素的設定而排序下來的定位，在這個定位中屬性中設定 top, right, bottom, left 的話，元素會依照自己目前的位置來做相對的位移（left: 20px 的話就是往右邊移動 20px，也可以理解成左邊與邊界的距離增加 20px）
當 z-index 並非 auto 時，此定位屬性會產生一個新的堆疊環境（stacking context）

absolute：

設定這個屬性的元素，排版的順序會直接脫離原本與其他元素相依的環境，同時也不會在頁面上佔有空間，像是浮起來一樣。而他會透過離他最接近的 relative 元素來做定位與排版。

當 z-index 不是 auto 的時候，absolute 的設定也會產生一個新的堆疊環境（stacking context）。在這個堆疊環境中，margin 不會有塌陷（collapse）的問題。

fixed

與絕對定位相同，設定了 fixed 屬性的元素，會脫離與其他元素相依的環境，fixed 屬性的定位是根據視窗範圍去定位的。

sticky

一般情況下會根據 HTML 上的元素設定而排序下來，當元素的位置到達所設定的定位後，會黏在設定的定位上不會變動，常見的有 header 上的導覽列，或是第二層的導覽列，當 top 設定為 0 的時候，即使把視窗往下捲動，該導覽列仍然會黏在 top 0 的位置上。

參考

MDN - position